<template>
	<view class="container">
		<view class="contentlist">
			<view class="manageAndAdd">
				<u-tabs
					:list="list"
					lineWidth="30"
					:lineColor="_temp_themeColor"
					@change="tabsChange"
					:activeStyle="{
						color: _temp_themeColor,
						fontWeight: 'bold',
						transform: 'scale(1.02)'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 20rpx; padding-right: 20rpx;padding-top: 10rpx;padding-bottom:10rpx; height: 60rpx;"
				></u-tabs>
				
				<view class="right" v-if="addressType == 0">
					<view class="right_item" @click="manage">
						<u-icon name="edit-pen" :color="_temp_themeColor"></u-icon>
						<text :style="{color: _temp_themeColor}">{{ manageFlag? '完成':'管理'}}</text>
					</view>
					<view class="right_item" @click="editAddress">
						<u-icon name="plus" :color="_temp_themeColor"></u-icon>
						<text :style="{color: _temp_themeColor}">新增</text>
					</view>
				</view>
			</view>
			
			<AddressList v-if="addressType == 0" @editItemClick="editItemClick" :manageFlag="manageFlag" @setManage="resetState"></AddressList>
			<FirmAddressList v-if="addressType == 1"></FirmAddressList>
		
		</view>
		<u-popup :show="edit_show" closeable bgColor="#f8f8f8" :round="10" mode="bottom" @close="closeEdit">
			<AddressEdit
				v-if="edit_show"
				@close="closeEdit"
				:title="title"
				:type="type"
				:address="editCurrentAddress"
				:addressIndex="editIndex"
			></AddressEdit>
		</u-popup>
	</view>
</template>

<script>
	import AddressList from './address-list.vue'
	import FirmAddressList from './firm-address-list.vue'
	import AddressEdit from './address-edit.vue'
	export default {
		name:"select-popup",
		components: {
			AddressList,
			FirmAddressList,
			AddressEdit
		},
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
	
		data() {
			return {
				list: [
					{name: '地址列表'},
					{name: '使用店铺地址'}
				],
				addressData: '',
				addressType: 0, // 0是个人地址，1是店铺地址
				edit_show: false,
				manageFlag: false,
				title: '',
				type: '',
				editIndex: 0,
				editCurrentAddress: {}
			};
		},
		mounted () {
			this.addressData = this.addressList[0];
		},
		methods: {
			selectedItem (item) {
				this.addressData = item;
			},
			// 切换个人地址和店铺地址
			tabsChange (e) {
				this.addressType = e.index;
			},
			// 管理地址
			manage () {
				this.manageFlag = !this.manageFlag;
			},
			// 新增地址弹窗开启
			editAddress () {
				this.edit_show = true;
				this.type = 'add';
				this.title = '新增地址';
			},
			// 编辑地址弹窗
			editItemClick (index) {
				this.edit_show = true;
				this.type = 'edit';
				this.title = '修改地址';
				this.editIndex = index;
				this.editCurrentAddress = this.addressList[index];
			},
			// 关闭编辑地址弹窗
			closeEdit () {
				this.manageFlag = false;
				this.edit_show = false;
				this.editCurrentAddress = {};
			},
			// 恢复初始状态
			resetState () {
				this.manageFlag = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		
		.contentlist{
			width: 100%;
			padding-top: 80rpx;
			
			.manageAndAdd{
				width: 100%;
				padding: 20rpx 20rpx;
				border-bottom: 1rpx solid #b6b6b6;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				
				.left{
					font-size: 30rpx;
					font-weight: bold;
					color: #414141;
				}
				.right{
					display: flex;
					align-items: center;
					
					.right_item{
						display: flex;
						align-items: center;
						padding-left: 40rpx;
						font-size: 30rpx;
						color: #01cb88;
					}
				}
			}
			
			.scroll{
				width: 100%;
				height: 55vh;
				margin-bottom: 60rpx;
			}
			
		}
	}
</style>